<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-14 11:01:36
 * @LastEditTime : 2022-09-14 11:13:43
 * @FilePath     : \src\ChildComponent.vue
-->
<template>
    <div>
        <h2>子组件</h2>
        <button @click="change">修改</button>
    </div>
</template>

<script>
export default {
    name:'ChildComponent',
    props:{
      msg:{
          type:String,
          default:'这是默认数据'
      }
    },
    computed: {
        // 当我们在子组件里修改 currentPage 时，父组件的 page 也会随之改变
        currentMsg: {
            get() {
                return this.msg
            },
            set(newVal) {
                this.$emit("update:msg", newVal)
            }
        }
    },
    methods: {
        change() {
            this.currentMsg = '改变了'      
        }
    }, 
    mounted(){
        console.log(this.msg)
    }
}
</script>

<style>

</style>template